import React, { useState } from 'react';
import './Me.css';
import personalface from '../../assets/img/personfacewhite.png';
import face from '../../assets/img/face.jpg';
import Vip from '../../components/Vip/Vip'
import Wallet from '../../components/Wallet/Wallet'
import BlankCom from '../../components/BlankCom/BlankCom'
import { message } from 'antd';
import Focus from '../../components/Focus/Focus';
import Rank from '../../components/Rank/Rank';
import ReadRecord from '../../components/ReadRecord/ReadRecord';


export default function Me(props) {
  const [recordshow, setrecordshow] = useState(0);
  const [focusshow, setfocusshow] = useState(0);
  const [rankshow, setrankshow] = useState(0);
  const [blankshow, setblankshow] = useState(0);
  const [vipshow, setvipshow] = useState(0);
  const [walletshow, setwalletshow] = useState(0);
  function showrecord() {
    if (!judgelogin()) {
      return;
    }
    setrecordshow(1);
  }
  function hiderecord() {
    setrecordshow(0);
  }
  function showfocus() {
    if (!judgelogin()) {
      return;
    }
    setfocusshow(1)
  }
  function hidefocus() {
    setfocusshow(0)
  }
  function showrank() {
    if (!judgelogin()) {
      return;
    }
    setrankshow(1);
  }
  function hiderank() {
    setrankshow(0)
  }
  function showblank() {
    if (!judgelogin()) {
      return;
    }
    setblankshow(1);
  }
  function hideblank() {
    setblankshow(0);
  }
  function showvip() {
    setvipshow(1);
  }
  function hidevip() {
    setvipshow(0);
  }
  function judgelogin() {
    if (!props.loginType) {
      message.destroy(1);
      message.info(
        {
          icon: <></>,
          key: 1,
          content: <div>请登录后再进行操作</div>,
          className: "toast",
        }
      )
      return 0
    }
    return 1
  }
  function showwallet() {
    if (!judgelogin()) {
      return;
    }
    setwalletshow(1);
  }
  function hidewallet() {
    setwalletshow(0);
  }

  return (

    <>
      <ReadRecord reading={props.reading} show={recordshow} hiderecord={hiderecord} />
      <Rank show={rankshow} hiderank={hiderank} />
      <Focus show={focusshow} hidefocus={hidefocus} />
      <BlankCom show={blankshow} hideBlankCom={hideblank} title="我的笔记" content="暂无笔记记录" />
      <Wallet show={walletshow} hidewallet={hidewallet} />
      <Vip show={vipshow} hidevip={hidevip} />
      <div className="Mebox">
        <div className="topicon">
          <div className="message">
            <i className='iconfont icon-xinfeng'></i>
          </div>
          <div className="setup">
            <i className='iconfont icon-shezhi2'></i>
          </div>
        </div>
        {
          props.loginType ? (
            <div className="personal">
              <div className="personface"><img src={face} alt="" /></div>
              <div className="personal-left">早睡早起</div>
              <div className="personal-right">主页<i className='iconfont icon-you'></i></div>
            </div>
          ) : (
            <div className="personal">
              <div className="personface"><img src={personalface} alt="" /></div>
              <div className="personal-left">游客</div>
              <div onClick={props.setLogin} className="personal-right">点击登录<i className='iconfont icon-you'></i></div>
            </div>
          )
        }
        <div className="clickbox">
          <div className="first-row-clickbox">
            <div className="first-row-minbox" onClick={showwallet}>
              <div className="first-row-minbox-iconbox">
                <div className='colorbox'>
                  <i className='iconfont icon-zhanghu'></i>
                </div>
                <div className='contentbox'>
                  账户
                </div>
              </div>
              <div className="tipsbox">
                余额:{props.loginType ? "2.82" : "0.00"}
              </div>
            </div>
            <div className="first-row-minbox vip">
              <div className="first-row-minbox-iconbox" onClick={showvip}>
                <div className='colorbox'>
                  <i className='iconfont icon-huiyuanka'></i>
                </div>
                <div className='contentbox'>
                  免费无限卡
                </div>
              </div>
              <div className="tipsbox">
                {props.loginType ? "今日到期" : "9元/月"}
              </div>
            </div>
          </div>
          <div className="second-row-clickbox">
            <div className="second-row-minbox" onClick={showrank}>
              <div className="iconbox">
                <i className='iconfont icon-paixingbang'></i>
              </div>
              <div className="title">
                读书排行榜
              </div>
              <div className="tips">
                {
                  props.loginType ? <div>第<span>2</span>名</div> : ""
                }
                <div className='bottom'>
                  {props.loginType ? "11分钟，可兑换两天无限卡" : ""}
                </div>
              </div>
            </div>
            <div className="second-row-minbox focus" onClick={showfocus}>
              <div className="iconbox">
                <i className='iconfont icon-guanzhu'></i>
              </div>
              <div className="title">
                关注
              </div>
              <div className="tips">
                {
                  props.loginType ? <div><span>21</span>人关注我</div> : ""
                }
                <div className='bottom'>
                  {props.loginType ? "已关注21人" : ""}
                </div>
              </div>
            </div>
          </div>
          <div className="second-row-clickbox">
            <div className="second-row-minbox note" onClick={showblank}>
              <div className="iconbox">
                <i className='iconfont icon-yumaobi'></i>
              </div>
              <div className="title">
                笔记
              </div>
              <div className="tips">
                {
                  props.loginType ? <div>暂无笔记</div> : ""
                }
              </div>
            </div>
            <div className="second-row-minbox record" onClick={showrecord}>
              <div className="iconbox">
                <i className='iconfont icon-lishijilu-copy-copy '></i>
              </div>
              <div className="title">
                阅读记录
              </div>
              <div className="tips">
                {
                  props.loginType ? <div><span>4</span>本读完</div> : ""
                }
              </div>
            </div>
          </div>
          <div className="logout">
            退出登录
          </div>
        </div>

      </div>
    </>

  );
}
